<script type="text/javascript" src="../../static/js/prompt.js" th:src="@{/js/prompt.js}"></script>
<div class="x_panel">
    <div class="x_title">
        <h2>人员
            <small>修改</small>
        </h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br/>
        <form id="defaultForm" data-parsley-validate=""
              class="form-horizontal form-label-left" novalidate="" method="post" >
            <input type="hidden" name="empId" id="empId" th:value="${emp?.empId}" />
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">人员编码 </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="empCode" id="empCode" required="required" th:value="${emp?.empCode}"
                           oninvalid="setCustomValidity('请输入用户编号');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">人员姓名
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="empName" required="required" th:value="${emp?.empName}"
                           oninvalid="setCustomValidity('请输入用户名称');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">登录账号
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="loginName"  required="required" th:value="${emp?.loginName}"
                           oninvalid="setCustomValidity('请输入登录账号');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
                    <input type="hidden"  name="loginPwd" required="required" th:value="${emp?.loginPwd}"
                           oninvalid="setCustomValidity('请输入用户密码');" class="form-control col-md-7 col-xs-12"  />
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">性别</label>
                <div class="col-md-6 col-sm-6 col-xs-12 radio radio-success in_on">
                    <input type="hidden" id="mode2"  name="gender" th:value="${emp?.gender}"/>
                    <div class="col-md-6 ">
                        <input type="radio" id="start3" name="sex" value="男"/><label>男</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start4" name="sex" value="女"/><label>女</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start8" name="sex" value="男"/>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">使用状态</label>
                <div class="col-md-6 col-sm-6 col-xs-12 radio radio-success in_on" >
                    <input type="hidden" id="mode" name="sts" th:value="${emp?.sts}"/>
                    <div class="col-md-6 ">
                        <input type="radio" id="start1" name="start" value="1"/><label>使用</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start2" name="start" value="0"/><label>未使用</label>
                    </div>
                    <div class="col-md-6 ">
                        <input type="radio" id="start5" name="start" value="1"/>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">联系方式</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="contactNumber" required="required" th:value="${emp?.contactNumber}"
                           oninvalid="setCustomValidity('请输入联系方式');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">电子邮件</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="text" name="email" required="required" th:value="${emp?.email}"
                           oninvalid="setCustomValidity('请输入电子邮件');" class="form-control col-md-7 col-xs-12"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">用工形式
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="hidden" id="model" th:value="${emp?.empMode}"/>
                    <select class="form-control" name="empMode">
                        <option value="">--请选择--</option>
                        <option th:each="info,iterStat : ${model}" th:value="${info.kv_id}" th:text="${info.kv_val}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">所属部门</label>
                <input type="hidden" name="orgId" id="orgId" th:value="${orgIds}"/>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control" name="orgName" readonly="readonly" th:value="${orgNames}"/>
                        <span class="input-group-btn" style="position: absolute;right: 28px;z-index: 100">
                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">+</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">角色名称</label>
                <input type="hidden" name="roleId" id="roleId" th:value="${roleIds}"/>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="input-group col-md-12">
                        <input type="text" class="form-control" name="roleName" readonly="readonly" th:value="${roleNames}"/>
                        <span class="input-group-btn" style="position: absolute;right: 28px;z-index: 100">
                              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">+</button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                    <button type="button" id="validateBtn" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-primary" th:id="${emp?.empId}" onclick="updateEmp(this)">重置</button>
                    <button type="button"  onclick="backup()" class="btn btn-success">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    部门名称
                </h4>
            </div>
            <ul id="treeDemo" class="ztree"></ul>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="send" onclick="send()">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    角色名称
                </h4>
            </div>
            <ul id="treeDemo2" class="ztree"></ul>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="send2" onclick="send2()">
                    确定
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<style>
    .in_on i { opacity: 0 }
</style>
<script type="text/javascript" th:inline="javascript">

    $(document).ready(function() {
        $('form').bootstrapValidator({
//        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {  //start
                empCode: {
                    validators: {
                        notEmpty: {
                            message: '请输入人员编码'
                        }
                    }
                },
                empName: {
                    validators: {
                        notEmpty: {
                            message: '请输入人员姓名'
                        }
                    }
                },
                sex: {
                    validators: {
                        notEmpty: {
                            message: '请选择性别'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '请输入登录名'
                        }
                    }
                },
                start: {
                    validators: {
                        notEmpty: {
                            message: '使用状态'
                        }
                    }
                },
                contactNumber: {
                    validators: {
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        regexp: {
                            regexp: /^1[3|5|8|7]{1}[0-9]{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址不对'
                        }
                    }
                },
                empMode: {
                    validators: {
                        notEmpty: {
                            message: '用工形式不能为空'
                        }
                    }
                },
                orgName: {
                    validators: {
                        notEmpty: {
                            message: '部门不能为空'
                        }
                    }
                },
                roleName: {
                    validators: {
                        notEmpty: {
                            message: '角色不能为空'
                        }
                    }
                }

            }
        });
        // Validate the form manually
        $('#validateBtn').click(function() {
            $('form').bootstrapValidator('validate');
            var flag = $('form').data('bootstrapValidator').isValid();
            if(flag){
                $("input[name=sts]").val($("input[name='start']:checked").val());
                $("input[name=gender]").val($("input[name='sex']:checked").val());
                var empSaveAndFlush = $("#defaultForm").serialize();
                $('#validateBtn').attr("disabled","disabled");
                $.post("/emp/checkEmpForUpdate", empSaveAndFlush, function (data) {
                    console.log(data);
                    if (data == "emp_code") {
                        $.MsgBox.Alert("提示", "用户编码重复");
                        $("input[name=empCode]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('empCode', 'NOT_VALIDATED', null)
                            .validateField('empCode');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    } else if (data == "emp_name") {
                        $.MsgBox.Alert("提示", "用户姓名重复");
                        $("input[name=empName]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('idcardno', 'NOT_VALIDATED', null)
                            .validateField('idcardno');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    } else if (data == "login_name") {
                        $.MsgBox.Alert("提示", "登录名重复");
                        $("input[name=loginName]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('loginName', 'NOT_VALIDATED', null)
                            .validateField('loginName');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    } else if (data == "contact_number") {
                        $.MsgBox.Alert("提示", "联系方式重复");
                        $("input[name=contactNumber]").val("");
                        $('form').data('bootstrapValidator')
                            .updateStatus('contactNumber', 'NOT_VALIDATED', null)
                            .validateField('contactNumber');
                        $('#validateBtn').removeAttr("disabled","disabled");
                    } else {
                        $.post("/emp/updateAndSave", empSaveAndFlush, function (result) {
                            if (result != null) {
                                $.MsgBox.Alert("提示", "修改成功！");
                                $('#validateBtn').removeAttr("disabled","disabled");
                                $.goTo("toEmpList");
                            }
                        });
                    }
                });
            }else{
                return;
            }
        });
        $("form").each(function() {
            var $form = $(this);
            $form.bootstrapValidator().on('success.form.bv', function(e) {
                // 阻止默认事件提交
                e.preventDefault();
            });
        });
    });
</script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {//默认加载
        if($("input[name=sts]").val()=='1'){//默认账号状态
            $("#start1").attr("checked", true);
        }else{
            $("#start2").attr("checked", true);
        }
        if($("input[name=gender]").val()=='男'){//默认账号状态
            $("#start3").attr("checked", true);
        }else{
            $("#start4").attr("checked", true);
        }

        var orgNames=[[${orgNames}]];
        $("input[name=orgName]").val(orgNames);
        $("select[name=empMode] option").each(function(){//账号是否有效
                    if($(this).val()==$('#mode').val()){
                        $(this).attr("selected", true);
                    }
         });
         $("select[name=empMode] option").each(function(){//岗位
                    if($(this).val()==$('#model').val()){
                        $(this).attr("selected", true);
                    }
         });

        $('#resetBtn').click(function() {
            /*[+
         var empId = $("#empId").val();
         $.goTo("updateEmp/"+empId);
         +]*/
        });

     });

    /*]]>*/

</script>


<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var setting = {
        check: {
            enable: true
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };

    var zNodes =eval([[${org}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){

        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
        var orgS=$("input[name=orgName]").val().split(",");
        var node = treeObj.transformToArray(treeObj.getNodes());
            $.each(orgS,function(i,val){
                $.each(node,function(index,value){
                    if(val==value.name){
                        treeObj.checkNode(node[index],true,true)
                    }
                })
            })
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            if(nodes[i].isParent==false){
                alert(nodes[i].name); //获取选中节点的值
            }

        }
    };

    function send() {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            c="";
        for(var i=0;i<nodes.length;i++){
                v+=nodes[i].name + ",";
                c+=nodes[i].id + "|";
        }
        $("input[name=orgName]").val(v.substring(0,(v.length-1)));
        $("input[name=orgId]").val(c.substring(0,(c.length-1)));
        $('form').data('bootstrapValidator')
            .updateStatus('orgName', 'NOT_VALIDATED', null)
            .validateField('orgName');
        $("#myModal").modal("hide");
    }
    /*]]>*/
</script>

<script type="text/javascript" th:inline="javascript">

    /*<![CDATA[*/
    var setting = {
        check: {
            enable: true
        },
        callback: {
            onClick: zTreeBeforeClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }

    };

    var zNodes =eval([[${role}]]);
    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo2"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){

        $.fn.zTree.init($("#treeDemo2"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2");
        var orgS=$("input[name=roleName]").val().split(",");
        var node = treeObj.transformToArray(treeObj.getNodes());
        $.each(orgS,function(i,val){
            $.each(node,function(index,value){
                if(val==value.name){
                    treeObj.checkNode(node[index],true,true)
                }
            })
        })
    });

    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            if(nodes[i].isParent==false){
                alert(nodes[i].name); //获取选中节点的值
            }

        }
    };

    function send2() {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo2"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        c="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            c+=nodes[i].id + "|";
        }
        $("input[name=roleName]").val(v.substring(0,(v.length-1)));
        $("input[name=roleId]").val(c.substring(0,(c.length-1)));
        $('form').data('bootstrapValidator')
            .updateStatus('roleName', 'NOT_VALIDATED', null)
            .validateField('roleName');
        $("#myModal2").modal("hide");
    }
    /*]]>*/
</script>

